<template>
    <el-dialog 
    v-model="dataMap.showDialog" 
    :title="titleText" 
    width="30%" 
    draggable
    @close="handleClose"
    >
        <el-form 
        :model="formInline" 
        label-width="60px"
        size="small"
        style="margin-top:10px;"
        @validate="checkFrom"
        :rules="dataMap.formRules"
        ref="ruleFormRef"
        >
            <template v-for="(item,index) in filters">
                <template v-if="item.new_form == 1">
                    <el-form-item :label="item.title" prop="index" v-if="item.filter_type == 'text'">
                        <el-input v-model="dataMap.formData[index]"  :placeholder="'请输入'+item.title" clearable />
                    </el-form-item>
                    <el-form-item :label="item.title" prop="index" v-if="item.filter_type == 'select'">
                        <el-select clearable filterable v-model="dataMap.formData[index]" :placeholder="'请输入'+item.title">
                            <el-option v-for="(value,index) in item.listData" :label="value[item.list_data.dropdownValue]" :value="value[item.list_data.dropdownKey]" />
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="item.title" prop="index" v-if="item.filter_type == 'multi_select'">
                        <el-select clearable multiple filterable v-model="dataMap.formData[index]" :placeholder="'请输入'+item.title">
                            <el-option v-for="(value,index) in item.listData" :label="value[item.list_data.dropdownValue]" :value="value[item.list_data.dropdownKey]" />
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="item.title" prop="index" v-if="item.filter_type == 'checkbox'">
                        <el-checkbox-group v-model="dataMap.formData[index]">
                            <el-checkbox v-for="(value,key) in item.listData" :label="key">{{value}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item :label="item.title" v-if="item.filter_type == 'date'">
                        <el-date-picker
                            v-model="dataMap.formData[index]"
                            type="datetime"
                            placeholder="请选择时间"
                            :shortcuts="shortcuts"
                            value-format="YYYY-MM-DD HH:mm:ss"
                        />
                    </el-form-item>
                    <el-form-item :label="item.title" prop="index" v-if="item.filter_type == 'date_range'">
                        <el-date-picker
                            v-model="dataMap.formData[index]"
                            type="datetimerange"
                            range-separator="To"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            value-format="YYYY-MM-DD HH:mm:ss"
                        />
                    </el-form-item>
                    <el-form-item :label="item.title" prop="index" v-if="item.filter_type == 'number'">
                        <el-input v-model="dataMap.formData[index]"  :placeholder="'请输入'+item.title" clearable />
                    </el-form-item>
                    <el-form-item :label="item.title" prop="index" v-if="item.filter_type == 'number_range'">
                        <el-input style="width: 100px" v-model="dataMap.formData[index+'_start']"  placeholder="最小" />
                        <span style="margin-left:4px;margin-right:4px;">To</span>
                        <el-input style="width: 100px" v-model="dataMap.formData[index+'_end']"  placeholder="最大" />
                    </el-form-item>
                </template>
            </template>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
            <el-button @click="dataMap.showDialog = false">取消</el-button>
            <el-button type="primary" @click="submitForm">提交</el-button>
        </span>
        </template>
    </el-dialog>
</template>
<script setup>
import {reactive,watch,ref} from 'vue'
//import type { FormInstance, FormRules } from 'element-plus'


let dataMap = reactive({
    showDialog:false,
    formData:{},
    formRules:{}
});

const props = defineProps({
    titleText:{
        type:String,
        default:()=>{
            return '';
        }
    },
    filters:{
      type:Array,
      default:()=>{
        return [];
      }
    },
    vModel:{
        type:Boolean,
        default:()=>{
            return false;
        }
    },
    closeDialogFunc:{
        type:String,
        default:()=>{
            return '';
        }
    },
    getDialogDataFunc:{
        type:String,
        default:()=>{
            return '';
        }
    }
})


const emit = defineEmits(['props.closeDialogFunc','props.getDialogDataFunc']);
//关闭的回调
const handleClose = ()=>{
    emit(props.closeDialogFunc,false)
}
//监听
watch([()=>props.vModel],(newVal)=>{
    dataMap.showDialog = newVal[0];
    for(let k in props.filters){
        if(props.filters[k].new_form == 1){
            dataMap.formRules[k] = props.filters[k].form_rule;
        }
    }
},{deep: true})
//表单校验
const checkFrom = ()=>{
    console.log(22);
}
//提交
const submitForm = ()=>{
    emit(props.getDialogDataFunc,dataMap.formData)
}

</script>
<style lang="scss" scoped>
</style>